import React,{Component} from 'react';

import {
	Text,
	View,
	Animated,
	LayoutAnimation,
	BackAndroid,
	TouchableWithoutFeedback,
	Easing,
	Dimensions,
	Image,
	StyleSheet,
	BackHandler,
	Alert
} from 'react-native';
import Swiper from 'react-native-swiper'
import timeago from 'timeago.js';
import FitImage from 'react-native-fit-image';

var timeagoInstance = timeago();
var {width,height}= Dimensions.get("window");
import CustomImage from './CustomImage';
export default class ImageDetail extends Component{
	constructor(props) {
	  super(props);
	
	  this.state = {
	  	w:new Animated.Value(0.5),
	  	h:new Animated.Value(0.5)
	  };
	}
	componentWillMount(){
		LayoutAnimation.spring();
		BackAndroid.addEventListener("hardwareBackPress",this.onBackAndroid.bind(this))
	}
	componentDidMount(){
		Animated.timing(this.state.w,{
			duration:500,
			toValue:width*1,
			easing:Easing.linear
		}).start();
		Animated.timing(this.state.h,{
			duration:500,
			toValue:height*1,
			easing:Easing.linear
		}).start();		
	}
	componentWillUnmount(){
		console.log(this.props.img);
		BackAndroid.removeEventListener('hardwareBackPress',this.onBackAndroid.bind(this))
	}	
	onBackAndroid(){
	   if(this.props.navigator.getCurrentRoutes().length>0){
			this.props.navigator.pop();
			return true;
		}
		return false;	
	}
	_onBackClick(){
		if(this.props.navigator){
			this.props.navigator.pop();
		}
	}	
	render(){
		/*return (
			<View style={{flex:1}}>
				<View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
					<TouchableWithoutFeedback onPress={()=>this._onBackClick()}>
						<Animated.Image style={{height:this.state.h,width:this.state.w}} source={{uri:this.props.img.url}}>
						</Animated.Image>
					</TouchableWithoutFeedback>
				</View>
			</View>
			);*/
			var imgs= this.props.imgs;
			return (
				<Animated.View style={{height:this.state.h,width:this.state.w}}>
				<Swiper
		          style={styles.wrapper}
		          renderPagination={renderPagination}
		          loop={false}
		          index={this.props.imgIndex}
		        >
		          {
		          	imgs.map((img,index)=>{
						return (
							<TouchableWithoutFeedback key={index} onPress={()=>this._onBackClick()}>
								<View style={styles.slide}  title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
									<CustomImage style={styles.image} url={img.url} source={{uri:img.url}} />
								</View>	
							</TouchableWithoutFeedback>
							)	          			
		          	})
		          }
		          
		        </Swiper>
		        </Animated.View>
				)
	}
}

const renderPagination = (index, total, context) => {
  return (
    <View style={styles.paginationStyle}>
      <Text style={{ color: 'grey' }}>
        <Text style={styles.paginationText}>{index + 1}</Text>/{total}
      </Text>
    </View>
  )
}


const styles = StyleSheet.create({
	wrapper: {

  	},
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  },
  image: {
    width
  },
  paginationStyle: {
    position: 'absolute',
    bottom: 10,
    right: 10
  },
  paginationText: {
    color: 'white',
    fontSize: 20
  }
})




